<template>
  <div class="post">
    <div v-if="isLoading" class="loading">正在加载中...</div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <div class="chapter" v-for="(chapter,index) in textList" :key="index">
        <h2>{{ chapter.secTitle }}</h2>
        <p>{{ chapter.content }}</p>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/index";

export default {
  name: "Article",
  data() {
    return {
      isLoading: false,
      post: null,
      error: null,
    };
  },
  computed: {
    // 正文列表
    textList() {
      return this.post.textList;
    },
  },
  created() {
    this.fetchData();
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "fetchData",
  },
  methods: {
    fetchData() {
      this.error = this.post = null;
      this.isLoading = true;

      api.databaseApi
        .selectArtical(this.$route.params.id)
        .then((response) => {
          this.post = response.data;
          this.isLoading = false;
        })
        .catch((err) => {
          console.log(err.message);
          this.error = err.message;
          this.isLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.chapter{
  margin-bottom: 50px;
}
</style>